import React, { useEffect, useRef } from "react";
import * as echarts from "echarts";

export default function DeviceFault({ data = {} }) {
  const chartRef = useRef(null);

  useEffect(() => {
    if (!data.x || !data.y) return;
    const chart = echarts.init(chartRef.current);
    chart.setOption({
      tooltip: { trigger: 'axis' },
      xAxis: {
        type: 'category',
        data: data.x,
        axisLabel: { color: '#fff' }
      },
      yAxis: {
        type: 'value',
        axisLabel: { color: '#fff' }
      },
      series: [
        {
          data: data.y,
          type: 'bar',
          barWidth: 24,
          itemStyle: { color: '#00eaff', borderRadius: [8,8,0,0] },
          label: { show: true, position: 'top', color: '#fff' }
        }
      ]
    });
    return () => chart.dispose();
  }, [data]);

  return (
    <div style={{ width: '100%', height: 220 }}>
      <div style={{ color: '#00eaff', fontWeight: 700, fontSize: 16, marginBottom: 8 }}>设备故障监测</div>
      <div ref={chartRef} style={{ width: '100%', height: 180 }} />
    </div>
  );
} 